<template>
    <div class="c-login-module">
        <div v-if="!display" class="bg" style="padding: 30px 0;">
            <div class="wrap">
                <mt-button type="primary" @click="$router.push({path: '/login'})">登录/注册</mt-button>
            </div>
        </div>
        <div v-else class="bg">
            <div class="flex">
                <div>
                    <p class="wrap">
                        <icon clazz="icon-fangzi" style="width: 100px;height: 100px;"></icon>
                        <!--<img :src="avatarUrl" style="border-radius: 50%;height: 140px;margin-top: 20px;">-->
                    </p>
                </div>
                <div>
                    <p>{{user.name}} <span class="customer-type">{{type===1?'预':'后'}}</span></p>
                    <p>{{user.householdNo}}</p>
                    <p>{{user.address}}</p>
                </div>
                <div>
                    <mt-button plain size="small" @click="$router.push({name: 'accountSwitch'})">
                        <icon clazz="icon-qiehuan1" style="width: 20px;height: 20px;"></icon>
                    </mt-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                display: app.util.localStorage('user.householdNo'),
                type: 1,
                user: {
                    avatar: app.util.localStorage('user.avatar'),
                    name: app.util.localStorage('user.name'),
                    address: app.util.localStorage('user.address'),
                    householdNo: app.util.localStorage('user.householdNo')
                }
            }
        },
        computed: {
            avatarUrl() {
                return this.user.avatar && ((this.user.avatar.startsWith("http://") ? '' : app.config.setting.serverAsset) + this.user.avatar);
            }
        },
        props: {
            keyword: {
                type: String,
                default: ''
            },
            volumeYear: {
                type: Number,
                default: 0
            }
        }
    }
</script>
<style>
    .c-login-module .bg {
        background: -webkit-linear-gradient(-70deg, #AEDCB8, #F1D7B4, #F1D7B4, #AEDCB8); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(-70deg, #AEDCB8, #F1D7B4, #F1D7B4, #AEDCB8); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(-70deg, #AEDCB8, #F1D7B4, #F1D7B4, #AEDCB8); /* Firefox 3.6 - 15 */
        background: linear-gradient(-70deg, #AEDCB8, #F1D7B4, #F1D7B4, #AEDCB8); /* 标准的语法 */
        text-align: center;
    }

    .c-login-module .wrap {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        border-radius: 50%;
        background-color: white;
        border: solid 8px rgba(172, 113, 32, .5);
    }

    .c-login-module .wrap .mint-button {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 0px;
        font-size: 14px;
    }

    .flex {
        display: -webkit-flex; /* Safari */
        display: flex;
        margin: 0 10px;
        padding: 15px 0;
    }

    .flex div:first-child {
        width: 35%;
    }

    .flex div:nth-child(2) {
        width: 55%;
        text-align: left;
        margin-top: 10px;
    }

    .flex div:nth-child(2) p {
        font-size: 15px;
    }

    .flex div:last-child {
        width: 10%;
        line-height: 106px;
    }

    .flex .mint-button--small {
        border: 0;
    }
</style>
